<template>
  <div>
    <data-table ref="pagingTable" :options="options" :list-query="listQuery">
      <template #filter-content>
        <dic-list-select v-model="listQuery.params.examType" dic-code="exam_type" title="选择考试类型" /> <dic-list-select
          v-model="listQuery.params.openType" dic-code="open_type" title="开放类型" /> <el-date-picker
          v-model="listQuery.params.startTime" class="filter-item" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
          placeholder="考试开始时间" size="small" /> <el-date-picker v-model="listQuery.params.endTime" class="filter-item"
          value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="考试结束时间" size="small" /> <el-input
          v-model="listQuery.params.title" placeholder="搜索考试名称" style="width: 200px;" size="small"
          class="filter-item" />
      </template>
      <template #data-columns>
        <el-table-column label="考试名称" prop="title" show-overflow-tooltip>
          <template v-slot="scope">
            <detail-link :id="scope.row.id" :title="scope.row.title" to="ExamUpdate" permission="exam:update" />
          </template>
        </el-table-column>
        <el-table-column label="考试类型" align="center" width="100px" prop="examType_dictText" />
        <el-table-column label="开放权限" align="center" width="100px" prop="openType_dictText" /> <el-table-column
          label="考试时间" align="center" width="180px" show-overflow-tooltip>
          <template v-slot="scope">
            {{ scope.row.startTime }} ~ {{ scope.row.endTime }}
          </template>
        </el-table-column> <el-table-column label="总分" prop="totalScore" align="center" width="80px" /> <el-table-column
          label="及格分" prop="qualifyScore" align="center" width="80px" /> <el-table-column label="状态" align="center"
          prop="state_dictText" width="90px">
          <template v-slot="{ row }">
            <span :class="`exam-state-${row.state}`">{{ row.state_dictText }}</span>
          </template>
        </el-table-column> <el-table-column label="创建人" prop="createBy_dictText" align="center" width="100px" />
        <el-table-column label="操作" fixed="right" align="center" width="200px">
          <template v-slot="scope">
            <exam-inline-menu :value="scope.row.id" :state="scope.row.state" @refresh="refreshList" @share="showShare"
              @finish="handleFinish" />
          </template>
        </el-table-column>
      </template>
    </data-table> <share-exam-dialog :dialog-show.sync="shareVisible" :exam-id="examId" /> <el-dialog
      :visible.sync="initVisible" :close-on-click-modal="false" :destroy-on-close="true" width="540px">
      <div class="err-box">
        <div>
          1、结束后不能再重新开启，流程不可逆。
        </div>
        <div>
          2、如果需要阅卷，则会开启阅卷流程，请留意站内信。
        </div>
        <div>
          3、操作成功后，请手动刷新列表状态。
        </div>
      </div>
      <el-form ref="postForm" :model="postForm" label-position="left" label-width="80px">
        <el-form-item label="立即批阅" prop="startReview">
          <el-checkbox v-model="postForm.startReview" /> 勾选后，阅卷老师可以立即开始阅卷。
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="initVisible = false">
          取 消
        </el-button> <el-button :loading="loading" type="primary" @click="doFinish">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import permission from '@/directive/permission/index.js'
import { mapGetters } from 'vuex'
import ExamInlineMenu from '@/views/admin/exam/exam/components/ExamInlineMenu.vue'
import ShareExamDialog from '@/views/admin/exam/exam/components/ShareExamDialog.vue'
import { finishExam } from '@/api/exam/exam'

export default {
  name: 'ExamList',
  components: { ShareExamDialog, ExamInlineMenu },
  directives: { permission },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {
          offline: false,
          title: ''
        }
      },

      options: {
        add: {
          enable: true,
          permission: 'exam:add',
          router: { name: 'ExamAdd', params: { tmplId: '0' } }
        },
        edit: {
          enable: true,
          permission: 'exam:update',
          router: { name: 'ExamUpdate', params: { id: '$id' } }
        },
        delete: {
          enable: true,
          permission: 'exam:delete',
          url: '/api/exam/exam/delete'
        },
        // 可批量操作
        multi: true,
        // 列表请求URL
        listUrl: '/api/exam/exam/paging'
      },

      shareVisible: false,
      examId: null,

      loading: false,
      initVisible: false,
      postForm: {
        id: null,
        state: 6,
        startReview: false
      }
    }
  },

  computed: {
    ...mapGetters([
      'siteData'
    ])
  },

  activated() {
    this.$refs.pagingTable.refresh()
  },

  methods: {
    // 刷新表格
    refreshList() {
      this.$refs.pagingTable.getList()
    },
    showShare(examId) {
      this.examId = examId
      this.shareVisible = true
    },
    handleFinish(id) {
      this.postForm.id = id
      this.postForm.state = 6
      this.postForm.startReview = false
      this.initVisible = true
    },
    doFinish() {
      finishExam(this.postForm).then(() => {
        this.$message.success('结束考试命令已发送，请稍后刷新列表查看状态！')
        this.initVisible = false
        this.refreshList()
      })
    }
  }
}
</script>
<style scoped>
.exam-state-0,
.exam-state-3 {
  color: #DC423C;
  font-weight: 700;
}

.exam-state-4 {
  color: #FF9800;
}

.exam-state-5 {
  color: #4889FF;
}

.exam-state-6 {
  color: #1BA035;
}
</style>
